<template>
  <div :style="show" class="msg-list-box">
    <div class="time" :style="dislabel">
      <div>{{ time }}</div>
    </div>
    <div class="notification" v-if="notificationMsg">
      <span v-html="notificationMsg"></span>
    </div>
    <CardContainer v-else :info="info" :id="id">
      <BonusCard
        v-if="info.subType === 'bonus'"
        :info="info"
      />
      <TransferCard
        v-if="info.subType === 'transfer'"
        :info="info"
      />
      <TextCard
        v-if="info.subType === 'text' || info.subType === 'at'"
        @click.right="clickRight()"
        :info="info"
      />
      <ImgCard
        v-if="info.subType === 'image'"
        @click.right="clickRight()"
        :info="info"
        :id="id"
      />
      <FileCard
        v-if="info.subType === 'file'"
        @click.right="clickRight()"
        :info="info"
        :id="id"
      />
      <videoCard
        v-if="info.subType === 'video'"
        @click.right="clickRight()"
        :info="info"
        :id="id"
      />
      <audioCard
        v-if="info.subType === 'audio'"
        @click.right="clickRight()"
        :info="info"
        :id="id"
      />
    </CardContainer>
  </div>
</template>

<script>
import BonusCard from './BonusCard.vue'
import TransferCard from './TransferCard.vue'
import TextCard from './TextCard'
import ImgCard from './ImgCard'
import FileCard from './FileCard'
import videoCard from './videoCard'
import audioCard from './AudioCard'
import CardContainer from './CardContainer'
import moment from 'moment'
import _ from 'lodash'
import { mapState } from 'vuex'
import { setNotificationMsg } from '../../../../utils/messageFormatFunction.js'

export default {
  props: ['info', 'id', 'priorInfo'],
  components: { BonusCard, TransferCard, TextCard, ImgCard, FileCard, videoCard, audioCard, CardContainer },
  computed: {
    ...mapState('app', ['chatList', 'roomId', 'chatRoomInfo', 'selectMember', 'groupList', 'friendList']),
    time: function () {
      if (this.id === 0) {
        if (moment().isSame(moment(this.info.timestamp * 1), 'd')) {
          return moment(this.info.timestamp * 1).format('HH:mm')
        } else {
          if (moment().isAfter(moment(this.info.timestamp * 1), 'd')) {
            return '昨天'
          } else {
            return moment(this.info.timestamp * 1).format('YYYY-MM-DD')
          }
        }
      }
      if (!moment().isSame(moment(this.info.timestamp * 1), 'd')) {
        // 不是今天
        if (moment(this.info.timestamp * 1).isAfter(moment(this.priorInfo.timestamp * 1, 'd'))) {
          // 前后消息不是同一天
          if (moment(this.info.timestamp * 1).add(1, 'd').isSame(moment(), 'd')) {
            // 是昨天的信息
            return '昨天'
          } else {
            return moment(this.info.timestamp * 1).format('YYYY-MM-DD')
          }
        } else {
          return ''
        }
      } else {
        if (moment(this.info.timestamp * 1).subtract(5, 'm').isAfter(moment(this.priorInfo.timestamp * 1), 'm')) {
          return moment(this.info.timestamp * 1).format('HH:mm')
        } else {
          return ''
        }
      }
    },
    dislabel: function () {
      if (this.id === 0) {
        return {}
      }
      if (!moment().isSame(moment(this.info.timestamp * 1), 'day')) {
        // 不是今天
        if (moment(this.info.timestamp * 1).isAfter(moment(this.priorInfo.timestamp * 1, 'day'))) {
          // 前后消息不是同一天
          return {}
        } else {
          return { display: 'none' }
        }
      } else {
        if (moment(this.info.timestamp * 1).subtract(5, 'm').isAfter(moment(this.priorInfo.timestamp * 1), 'm')) {
          return {}
        } else {
          return { display: 'none' }
        }
      }
    },
    senderInfo: function () {
      if (_.isUndefined(this.info.senderId) && _.isUndefined(this.info.sender)) {
        return null
      } else {
        console.log('this.chatRoomInfo[this.roomId].data', this.chatRoomInfo[this.roomId].data)
        const index = _.findIndex(this.chatRoomInfo[this.roomId].data, e => e.userId + '' === this.info.senderId || e.userId + '' === this.info.sender)
        if (index !== -1) {
          return this.chatRoomInfo[this.roomId].data[index]
        } else {
          return null
        }
      }
    },
    isGroup: function () {
      const i = _.findIndex(this.groupList, e => e.roomId + '' === this.roomId)
      return i !== -1
    },
    notificationMsg: function () {
      const parame = {
        info: this.info,
        isGroup: this.isGroup,
        chatRoomInfo: this.chatRoomInfo,
        friendList: this.friendList,
        roomId: this.roomId
      }
      return setNotificationMsg(parame)
    }
  },
  data () {
    return {
      show: {}
    }
  },
  methods: {
  }
}
</script>

<style lang="scss">
.msg-list-box {
  position: relative;
  .notification {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    text-align: center;
  }

  .time {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    div {
      font-size: 12px;
      color: white;
      background-color: #ddd;
      padding: 5px 10px;
      border-radius: 3px;
    }
  }
}
</style>
